<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	*
	{
		margin: 0%;
		padding:0%;
		box-sizing: border-box;
	}
	html
	{
		height: 100%;
		background: linear-gradient(to bottom, #C9FFBF , #FFAFBD);
	}
	form
	{
	 	width: 400px;
	 	height: 300px;
		background: rgba(255, 255, 255, 0.3);
		margin: 0 auto;
		margin-top: 10%;
		border-radius: 2%;
		border: 1px solid #ffffff;
		box-shadow: 0px 0px 10px #ffffff;
		text-align: center;
		padding: 20px 0px;
	}
	p{
		font-size: 26px;
		font-weight: bold;
		letter-spacing: 5px;
	}
	input
	{
		margin-top: 25px;
		width: 230px;
		height: 30px;
		border-radius: 7px;
		outline: none;
		border: 1px solid rgb(211, 211, 211);
	}
	
	.in1,.in2
	{
		padding-left: 3px;
	}
	.in1:focus,.in2:focus
	{
		box-shadow: 0px 0px 100px #ffffff;
	}
	.submit
	{
		margin-top: 30px;
		width: 150px;
		height: 45px;
		background-color: #ffffff;
		border: 1px solid rgb(0, 225, 255);
		border-radius: 70px;
		color: rgb(0, 161, 182);
		outline: none;
	}
	.submit:hover
	{
		background: rgb(0, 161, 182);
		color: #ffffff;
	}
</style>


</head>
<body>
	
	<form action="imgtest.html" method="post">
		<p> LOGIN </p>
			姓名:  &nbsp;&nbsp;&nbsp;<input class="in1" type="text" name="username"><br>
			密码:  &nbsp;&nbsp;&nbsp;<input class="in2" type="password" name="password"><br>
			<input class="submit" type="submit" value="登录">
			<a href="views/register.html"><input class="submit" type="button" value="注册"></a> 
			<div id="result">
		
			</div>
			
			<input type="button" onclick="checkUsername()" value="检测用户名是否合法">
			
	</form>
</body>
<script type="text/javascript">

	var httpRequest;
	var inx = document.querySelector("input[name='username']");
	var ck;
	
	inx.onblur = function()
	{
		console.log(" username 光标离开");
		// inx.focus();
		
		checkUsername();		// 此处用同步是需要checkUsername 给出结果后再进行后续判断
		var div = document.getElementById("result");
		if( ck == true ) {
			
			div.innerHTML = "√√√√";
		}
		else {
			console.log("离谱 " + ck);
			div.innerHTML = "用户名不存在";
			inx.select();
		}
	}

	function checkUsername() {


		// 1. 
		if(window.XMLHttpRequest) {

			//在IE6以上的版本以及其他内核的浏览器(Mozilla)等
			httpRequest = new XMLHttpRequest();
		}else if(window.ActiveXObject) {

			//在IE6以下的版本
			httpRequest = new ActiveXObject();
		}


		
		// 2.

		//指定回调函数 , 注册回调函数
		httpRequest.onreadystatechange = function()		// 状态改变时 进入
		{
			// 异步代码逻辑

			// 四个状态
			console.log("" + httpRequest.readyState);

			//判断请求状态码是否是4【数据接收完成】
			if(httpRequest.readyState==4) {

				//再判断状态码是否为200【200是成功的】
				/*
					1xx
					2xx 服务端正常相应客户端
					3xx 服务端资源没有发生改变
					4xx 资源错误
					5xx 服务端错误
				*/
				console.log("数据接受完成");
				if(httpRequest.status==200) {

					
					//得到服务端返回的文本数据
					var text = httpRequest.responseText;
					console.log(text);
					if( text == "true")
					{
						ck = true;
						console.log("获得确认");
					}
					else	ck = false;

					//把服务端返回的数据写在div上
					// var div = document.getElementById("result");
					/* json 文件转化实例 */

					/*
						var json = JSON.parse(text);
						console.log(json);
						//把服务端返回的数据写在div上
						var div = document.getElementById("result");

						// 创建
						var node = document.createElement("p");
						node.appendChild(document.createTextNode(json.sites[0].name));
						div.appendChild(node);
						// div.innerText = text;
					*/

					// div.innerText = text;
				}

			}
		}

		// 3. 
		//创建http请求
		// httpRequest.open("POST", "Ltest", true);		// true 异步 | false 同步
		httpRequest.open("POST", "Ltest", false);
		//因为我使用的是post方式，所以需要设置消息头
		httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

		//得到文本框的数据
		var name = inx.value;
		console.log(name + " 用户名数据数据");
		// 4. 
		// 发送请求
		// 如果要传递数据给服务端，把数据作为参数传进去
		var data = "username=" + name;
		httpRequest.send(data);
		
		/*	 中文传输乱码解决方式
		var  name = encodeURI(name);
		*/ 
	}

</script>

</html>